<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue所需资源文件 -->
		<script src="../../js/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../../css/element/index.css">
		<!-- 引入组件库 -->
		<script src="../../js/element/index.js"></script>
		<script src="../../js/axios.min.js"></script>
		<script src="../../js/qs.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 顶部搜索区 -->
			<el-form :inline="true" :model="SearchUser" class="demo-form-inline">
				<el-form-item label="用户名">
					<el-input v-model="SearchUser.username" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item label="住址信息">
					<el-input v-model="SearchUser.useraddress" placeholder="用户住址"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getUserInfoes()">查询</el-button>
					<el-button type="success" @click="addUserInfo()">添加</el-button>
					<el-button type="warning">清空</el-button>
				</el-form-item>
			</el-form>
			<!-- 顶部搜索区域结束 -->
			<!-- 列表展示开始 -->
			<template>
				<el-table ref="multipleTable" :data="userInfoes" tooltip-effect="dark" style="width: 100%"
					@selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column type="index" width="50">
					</el-table-column>
					<el-table-column prop="username" label="姓名" width="120">
					</el-table-column>
					<el-table-column prop="userpwd" label="密码" width="120">
					</el-table-column>
					<el-table-column prop="usertel" label="联系方式" width="120">
					</el-table-column>
					<el-table-column prop="useraddress" label="地址" show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" @click="editUserInfo(scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" @click="deleteUserInfo(scope.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="margin-top: 20px">
					<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
					<el-button @click="toggleSelection()">取消选择</el-button>
				</div>
			</template>
			<!-- 列表展示结束 -->
			<!-- 分页功能开始 -->
			  <div class="block">
			   
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="pageNum"
			      :page-sizes="[2, 3, 5, 10]"
			      :page-size="pageSize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="total">
			    </el-pagination>
			  </div>
			<!-- 分页功能结束 -->
			<!-- 添加的弹框开始 -->
			<el-dialog title="用户信息" :visible.sync="dialogFormVisible">
				<el-form :model="editUserInfoBean">
					<el-form-item label="用户名" :label-width="formLabelWidth">
			  	<el-input v-model="editUserInfoBean.username" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" :label-width="formLabelWidth">
						<el-input v-model="editUserInfoBean.userpwd" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="住址" :label-width="formLabelWidth">
						<el-input v-model="editUserInfoBean.useraddress" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="联系方式" :label-width="formLabelWidth">
						<el-input v-model="editUserInfoBean.usertel" autocomplete="off"></el-input>
					</el-form-item>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveUserInfo()">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 添加弹框结束 -->

		</div>
	</body>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				SearchUser: {
					username: "",
					useraddress: ""
				},
				//用来存放表格中的数据对象
				userInfoes: [],
				// 控制新增弹框是否显示
				dialogFormVisible: false,
				// 添加时候用来存放用户信息
				editUserInfoBean: {
					id: "",
					username: "",
					userpwd: "",
					useraddress: "",
					usertel: ""

				},
				formLabelWidth: '120px',
				// 分页相关属性
				pageNum:1,
				pageSize:5,
				total:10
				
				
			},
			methods: {
				getUserInfoes: function(currentPage,currentSize) {
					if(!currentPage){
						currentPage=this.pageNum
					}
					if(!currentSize){
						currentSize=this.pageSize
					}
					
					var that = this
					// Qs.stringify将js对象进行序列化处理，以key、value进行拼接
					var params = Qs.stringify(this.SearchUser)
					params+="&pageNum="+currentPage+"&pageSize="+currentSize
					console.log(params)
					axios.post('http://localhost:8086/getUserInfoes', params)
						.then(function(response) {
							//将响应回来的用户信息数据绑定在列表中的数据对象上
						console.log(response)
							that.userInfoes=response.data.list
							that.pageNum=response.data.pageNum
							that.pageSize=response.data.pageSize
							that.total=response.data.total
						})
						.catch(function(error) {
					  console.log(error);
						});

				},
				toggleSelection(rows) {
					if (rows) {
						rows.forEach(row => {
							this.$refs.multipleTable.toggleRowSelection(row);
						});
					} else {
						this.$refs.multipleTable.clearSelection();
					}
				},
				handleSelectionChange(val) {
					this.multipleSelection = val;
				},
				editUserInfo: function(userInfoRow) {
					// 编辑操作因为要进行数据的回显，有两种实现的思路
					// 1、可以向服务器发起请求，然后通过用户的id进行查询用户信息，最后进行回显
					// 2、在element中有一个属性，slot-scope。可以通过该属性.row的操作，获取这一整行的数据
					this.editUserInfoBean = userInfoRow
					this.dialogFormVisible = true


				},
				deleteUserInfo: function(userId) {
					var that = this
					var deleteUserInfo = {
						id: userId,
						isdelete: "1"
					}
					// Qs.stringify将js对象进行序列化处理，以key、value进行拼接
					var params = Qs.stringify(deleteUserInfo)
					this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						axios.post('http://localhost:8086/deleteUserInfoById', params)
							.then(function(response) {
								if (response.data == "ok") {
									that.getUserInfoes()
								}
							})
							.catch(function(error) {
								console.log(error);
							});
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});


				},
				// 点击新增按钮时会触发的方法
				addUserInfo: function() {
					// 当弹框弹出的时候，将数据对象置空
					this.editUserInfoBean = {
						id: "",
						username: "",
						userpwd: "",
						useraddress: "",
						usertel: ""

					}
					this.dialogFormVisible = true
				},
				saveUserInfo: function() {
					var that = this
					// Qs.stringify将js对象进行序列化处理，以key、value进行拼接
					var params = Qs.stringify(this.editUserInfoBean)
					axios.post('http://localhost:8086/editUserInfo', params)
						.then(function(response) {
							//将响应回来的用户信息数据绑定在列表中的数据对象上
							if (response.data == "ok") {
								that.dialogFormVisible = false
								that.getUserInfoes()
							}
						})
						.catch(function(error) {
							console.log(error);
						});
				},
				// 分页相关方法
				// 在当前页显示多少条数据发生变化时，会进行触发
				handleSizeChange(val) {
				    this.getUserInfoes(this.pageNum,val)
				  },
				handleCurrentChange(val) {
				   this.getUserInfoes(val,this.pageSize)
				  }

			},
			mounted() {
				this.getUserInfoes()
			}
		})
	</script>
</html>
